<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!--自适应 width=device-width 等于当前设备的宽度 物理设备的宽度   缩放比例:initial-scale=1 当前不缩放-->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>Bootstrap Test</title>

		<!-- Bootstrap -->
		<link href="css/bootstrap.min.css" rel="stylesheet">
			<style>
				body{
					padding-top: 50px;
				}
				.starte{
					padding: 40px 15px;
					text-align: center;
				}
			</style>
	</head>

	<body>
		<nav class="navber navbar-inverse navbar-fixed-top" role="navigation">
			<div class="container">
				<div class="navbar-header">
					<a href="#" class="navbar-brand">project Name</a>
				</div>
				<div id="navbar" class="collapse navbar-collapse">
					<ul class="nav navbar-nav">
						<li class="active"><a href="#">Home</a></li>
						<li><a href="#">About</a></li>
						<li><a href="#">Contact</a></li>
					</ul>
				</div>
			</div>
		</nav>
		<div class="container">
			<div class="starte">
				<h1>Bootstrap stater templete</h1>
				<p class="lead">欢迎来到淘学网</p>
			</div>
			
			<h1>你好，世界！</h1>
			<div class="row">
				<div class="col-md-1">.col-md-1</div>
				<div class="col-md-1">.col-md-1</div>
				<div class="col-md-1">.col-md-1</div>
				<div class="col-md-1">.col-md-1</div>
				<div class="col-md-1">.col-md-1</div>
				<div class="col-md-1">.col-md-1</div>
				<div class="col-md-1">.col-md-1</div>
				<div class="col-md-1">.col-md-1</div>
				<div class="col-md-1">.col-md-1</div>
				<div class="col-md-1">.col-md-1</div>
				<div class="col-md-1">.col-md-1</div>
				<div class="col-md-1">.col-md-1</div>
			</div>
			<div class="row">
				<div class="col-md-8">.col-md-8</div>
				<div class="col-md-4">.col-md-4</div>
			</div>
			<div class="row">
				<div class="col-md-4">.col-md-4</div>
				<div class="col-md-4">.col-md-4</div>
				<div class="col-md-4">.col-md-4</div>
			</div>
			<div class="row">
				<div class="col-md-6">.col-md-6</div>
				<div class="col-md-6">.col-md-6</div>
			</div>
			<!--移动设备和桌面屏幕-->
			<!-- Stack the columns on mobile by making one full-width and the other half-width -->
			<div class="row">
				<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
				<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
			</div>

			<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
			<div class="row">
				<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
				<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
				<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
			</div>

			<!-- Columns are always 50% wide, on mobile and desktop -->
			<div class="row">
				<div class="col-xs-6">.col-xs-6</div>
				<div class="col-xs-6">.col-xs-6</div>
			</div>

			<!--手机、平板、桌面-->
			<div class="row">
				<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
				<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
			</div>
			<div class="row">
				<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
				<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
				<!-- Optional: clear the XS cols if their content doesn't match in height -->
				<div class="clearfix visible-xs-block"></div>
				<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
			</div>
			<!--多余的列（column）将另起一行排列-->
			<div class="row">
				<div class="col-xs-9">.col-xs-9</div>
				<div class="col-xs-4">.col-xs-4
					<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
				<div class="col-xs-6">.col-xs-6
					<br>Subsequent columns continue along the new line.</div>
			</div>
		</div>

		<!-- 先导入jquery的js文件 -->
		<!-- 再导入bootstrap.js-->
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
	</body>

</html>